<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>榜单</title>
		<link rel="icon" href="../static/img/01.png" type="image/x-icon" />
		<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />
		<style>
			@media (max-width: 768px) { 
				.bodys{
					display: none;
				}
				img{
					width: 60%;
				}
			}
			@media (max-width: 992px) { 
				img{
					width: 70%;
				}
			}
		</style>
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="header"></div>
		<!-- 榜单内容 -->
		<div class="m-5 p-5">
			<ul class="list-unstyled m-lg-5">
				<div class="row row-cols-1 row-cols-md-1 row-cols-lg-1 m-auto" data-role="listview" id="lists"></div>
			</ul>
		</div>
		<!-- 页脚 -->
		<div class="mt-5" id="footer"></div>
	</body>

	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/jquery.tmpl.js"></script>
	<script src="../static/js/bootstrap.bundle.min.js"></script>
	<script src="../static/js/TSMSys.hotelsAjax.js"></script>
	<script>
		$(function() {
			$('#header').load('header');
			$('#footer').load('footer');
		})
	</script>
	<!-- 模板 -->
	<script data-role="listview" id="myTemplate" type="text/x-jquery-tmpl">
		<!-- 媒体对象 -->
		<li class="media shadow p-3 mb-5 bg-white rounded">
			<h1 class="bg-warning font-italic text-white m-auto  font-weight-bold text-center" style="width: 58px;height: 58px;">${id}</h1>
			<a href="details?office=${urls}?id=${ids}">
			<img src="${img}" class="img-fluid img-thumbnail mr-3 ml-5 rounded align-self-center mr-3" alt="${name}"></a>
			<div class="bodys media-body m-auto pl-3">
				<h3 class="mt-0 mb-3 text-truncate">${name}</h3>
				<div>${actors}</div>
				<div class="text-black-50 text-truncate">${time}</div>
			</div>
			<div class="bodys rounded-right font-italic text-warning font-weight-bold m-auto pr-5"><h1><strong>${score}</strong>分</h1></div>
		</li>
	</script>
	<script>
		$.ajax({
			type: 'get',
			url: "http://localhost:8080/maoyan/movieslists",
			dataType: "json",
			data: {},
			success: function(data) {
				console.log(data);
				// 将json对象载入模板,并插入到#lists末尾中去
				$('#myTemplate').tmpl(data).appendTo('#lists');
			},
			error: function() {
				alert('failed!');
			},
		});
	</script>
</html>
